<template>
  <div>
    
    <table>
      <div>欢迎光临_vue开发的收银系统_水果店</div>
      <tr>
        <td>苹果10￥/斤，折扣&lt;8折&gt;</td>
      </tr>
      <tr>
        <td>请输入你要购买的斤数 <input v-model.number="jinshu" type="text" /></td>
      </tr>
      <tr>
        <td><button @click="btn" >结账买单~</button></td>
      </tr>
      <tr>
        <td>结账单:总价{{zong.toFixed(2)}}￥元 折后价{{zhe.toFixed(2)}}￥元 省了{{sheng.toFixed(2)}}￥元</td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      jinshu:'',
      zong :0,
      zhe:0,
      sheng:0,
    }
  },
  methods: {
    btn(){
      this.zong=this.jinshu*10
      this.zhe=this.zong*0.8
      this.sheng=this.zong-this.zhe

    }
  }
}
</script>

<style>
table{
  /* display: flex; */
  margin: 0 auto;
  text-align: center;
  border: 1px solid black ;
  
}
table td{
  border: 1px solid black ;
}
</style>
